<template>
	<view>
		<fui-nav-bar isOccupy isFixed background="#0052D9" title="备件入库" color="#fff" @leftClick="leftClick" @rightClick="rightClick">
		  <fui-icon color="#fff" name="arrowleft"></fui-icon>
		  <template v-slot:right>
		    <fui-icon color="#fff" @click="clickItem" name="plus"></fui-icon>
		  </template>
		</fui-nav-bar>
		
		<view class="viewport">
		  <view class="warp">
		    <view class="head">
		      <view class="ipt">
		        <u--input placeholder="请输入" prefixIcon="search" prefixIconStyle="font-size: 22px;color: #909399"></u--input>
		      </view>
		      <view class="screen" @click="screen">
		        <image class="img" src="/static/images/index/shaixuan.svg" mode=""></image>
		        筛选
		      </view>
		    </view>
		    <scroll-view
		      class="scroll-view"
		      :refresher-triggered="refreshing"
		      refresher-enabled
		      scroll-y="true"
		      lower-threshold="20"
		      @scrolltolower="onScrollToLower"
		      @refresherrefresh="onRefresh"
		      refresher-background="#f6f6f6"
		    >
		      <view class="port">
		        <view class="ul" v-for="(i,index) in list" :key="index" @click="particulars">
		          <view class="title">
								<view class="">
									{{i.name}}
								</view>
								<fui-icon :size="30" name="arrowright" @click="clickItem" style="position: absolute;right: 10rpx;"></fui-icon>
							</view>
		          <view class="li">
		            <span class="left">入库单号：</span>
		            <span>{{i.code}}</span>
		          </view>
		          <view class="li">
		            <span class="left">入库类型：</span>
		            <span>{{i.type}}</span>
		          </view>
							<view class="li">
							  <span class="left">入库日期：</span>
							  <span>{{i.time}}</span>
							</view>
		          <view class="li">
		            <span class="left">仓库名称：</span>
		            <span>{{i.warehouseName}}</span>
		          </view>
		          <view class="footer">
		            <view class="li">
		              <span class="left">入库人员：</span>
		              <span>{{i.useName}}</span>
		            </view>
		          </view>
		        </view>
		      </view>
		    </scroll-view>
		  </view>
		</view>
		
	</view>
</template>

<script setup>
	import { nextTick,reactive, ref, onMounted } from 'vue';
	const list = reactive([
	  {
	    id: 0,
			name:'备件03入库',
	    code: 'SB5666568',
	    type: '采购入库',
	    warehouseName: '仓库111',
	    useName: '刘冰雨1',
	    status: 1, // 1待审核 2通过 3审核中 4驳回 5已撤回
			time:'2024.03.26'
	  },
	  {
		 id: 1,
		 name:'备件2入库',
		 code: 'SB56wer8',
		 type: '领用还回',
		 warehouseName: '仓库456',
		 useName: '刘冰雨2',
		 status: 3,
		 time:'2024.03.26'
	  },
	  {
	    id: 2,
			name:'备件56入库',
	    code: 'SB52326568',
	    type: '采购入库',
	    warehouseName: '仓库12',
	    useName: '刘冰雨3',
	    status: 2,
			time:'2024.03.26'
	  },
	  {
	    id: 3,
			name:'备件21入库',
	    code: 'SB54566568',
	    type: '采购入库',
	    warehouseName: '仓库34',
	    useName: '刘冰雨4',
	    status: 4,
			time:'2024.03.26'
	  },
	  {
	    id: 4,
			name:'备件235入库',
	    code: 'SB5456368',
	    type: '采购入库',
	    warehouseName: '仓库232',
	    useName: '刘冰雨5',
	    status: 5,
			time:'2024.03.26'
	  }
	]);

// const clickItem = () => {
//   uni.navigateTo({
// 		url:'/subpkg_sparePart/addSparePart/addSparePart'
//   })
// };

const screen = () => {
  uni.navigateTo({
    url: './audit'
  });
};

//去详情页
const particulars = () => {
  uni.navigateTo({
    url: './info'
  });
};

//滚动条加载数据
const onScrollToLower = () => {
  uni.toast('到底了');
  console.log('到底了');
};

const leftClick = () => {
	uni.navigateBack()
}

const rightClick = () => {
	uni.navigateTo({
	  url: './add'
	});
};

//下拉刷新
const refreshing = ref(false);
const onRefresh = async () => {
  uni.toast('触发了下拉');
  console.log('触发了下拉刷新');
  refreshing.value = true;
};

</script>

<style lang="scss" scoped>
page {
  display: flex;
  height: 100%;
  overflow: hidden;
  flex-direction: column;
}
.viewport {
  flex: 1;
  display: flex;
  // height: 100%;
  overflow: hidden;
  flex-direction: column;
}

.warp {
  flex: 1;
  overflow: hidden;
  background-color: #f6f6f6;
  font-family: Arial, Helvetica, sans-serif;
  display: flex;
  flex-direction: column;
  /*  #ifdef  APP-PLUS || H5 */
  .scroll-view {
    flex: 1;
    height: 100%;
    // height: 80vh;
    padding-bottom: 120rpx;
  }
  /*  #endif  */

  /*  #ifdef  MP-WEIXIN  */
  .scroll-view {
    // flex: 1;
    // height: 100%;
    height: 80vh;
		
  }
  /*  #endif  */
  .head {
    display: flex;
    align-items: center;
    background-color: #fff;
    height: 120rpx;
    padding: 20rpx;
    // margin-bottom: 24rpx;
    .ipt {
      flex: 1;
      margin-left: 25rpx;
      height: 100rpx;
      display: flex;
      align-items: center;
    }

    .screen {
      // width: 100rpx;
      display: flex;
      align-items: center;
      justify-content: space-around;
      .img {
        width: 40rpx;
        height: 40rpx;
        margin-right: 10rpx;
      }
    }
  }
  .port {
    .ul {
      margin-bottom: 24rpx;
      background-color: #fff;
      padding: 0 30rpx;

      .title {
        color: #0052d9;
        font-size: 35rpx;
        font-weight: 600;
        height: 80rpx;
        line-height: 80rpx;
				display: flex;
				.time{
					color: #ccc;
					position: absolute;
					right: 30rpx;
					font-size: 28rpx;
				}
      }
      .li {
        color: #ccc;
        height: 50rpx;
        line-height: 50rpx;
        .left {
          color: #ccc;
          margin-right: 30rpx;
        }
      }
      .footer {
        display: flex;
        height: 80rpx;
        align-items: center;
        justify-content: space-between;
        .audit {
          border-radius: 25rpx;
          border: 1rpx solid #0052d9;
          height: 48rpx;
          width: 120rpx;
          display: flex;
          font-size: 28rpx;
          color: #0052d9;
          align-items: center;
          justify-content: space-around;
        }
      }
    }
  }
}
</style>
